<template>
	<view class="wrap">
		<!-- 日历头部 -->
		<view class="head">
			<bruce-calendar :selected="dateDayStyle" @change="getDayItem" />
		</view>

		<!-- 显示选中日期的不合格记录 -->
		<view v-if="selectedDate && dateDetails.length" class="date-details">
			<view class="date-details-title">日期 {{ selectedDate }} 的不合格记录：</view>
			<view v-for="(item, index) in dateDetails" :key="index" class="date-details-item" @click="toItem(item)">
				<!-- 只展示不合格的记录 -->
				<uni-card v-if="isError(item).length > 0" :border="false" :extra='item.createTime'
					:title='item.createName'>
					<view class="detail-item">
						<!-- 展示不合格的详细信息 -->
						<dict-tag :options="lineOptions" :value="item.line" />
						<dict-tag :options="portOptions" :value="item.port" />
						<view v-if="item.storageBay !== null">跺位：{{ item.storageBay }}</view>
						<view v-if="item.moiture > 12" class="detail-item-text">水分: {{ item.moiture }}</view>
						<view v-if="item.deoxynivalenol > 5000" class="detail-item-text">呕吐:
							{{ item.deoxynivalenol }}
						</view>
						<view v-if="item.fusariumToxin > 1500" class="detail-item-text">赤霉: {{ item.fusariumToxin }}
						</view>
						<view v-if="item.aflatoxin > 50" class="detail-item-text">黄曲: {{ item.aflatoxin }}</view>
						<view v-if="item.colorCode > 3.5" class="detail-item-text">色号: {{ item.colorCode }}</view>
						<!-- <view class="detail-item-text">{{item.remark}}</view> -->
					</view>
				</uni-card>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" @click="toEdit">添加</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getDicts
	} from '@/api/system/dict/data';
	import {
		getList
	} from '@/api/work/produce/feedTemp/index.js';


	export default {
		data() {
			return {
				loading: false, // 数据加载状态
				dataList: [], // 数据列表
				queryParams: {
					pageNum: 1, // 页码，默认第一页
					pageSize: 1000, // 每页数据量
					line: null, // 线位
					port: null, // 出料口
					createName: null, // 创建人
					dateRange: null, // 日期范围
				},
				dateRange: null, // 日期范围
				lineOptions: [], // 方位选择数据
				portOptions: [], // 出料口选择数据
				dateDayStyle: [], // 日期样式
				selectedDate: null, // 选中的日期
				dateDetails: [], // 选中日期的数据详情
				currentMonth: new Date().getMonth() + 1, // 当前月份
				viewType: 'month',
			};
		},
		onLoad() {
			this.fetchCurrentMonthData(); // 页面加载时默认查询当前月份的数据
			this.getDictList();
		},
		methods: {
			toEdit() {
				uni.redirectTo({
					url: '/pages/work/produce/feedTemp/feedTemp'
				});
			},
			//进入详情
			toItem(item) {
				uni.navigateTo({
					url: `/pages/work/produce/feedTemp/feedTempItem?recordId=${item.recordId}`
				});
			},
			//获取字典数据
			getDictList() {
				Promise.all([
					this.getDicts("discharge_line").then(resp => {
						this.lineOptions = resp.data;
					}),
					this.getDicts("discharge_outlet").then(resp => {
						this.portOptions = resp.data;
					})
				]).then(() => {
					uni.setStorage({
						key: 'discharge_line',
						data: this.lineOptions,
					})
					uni.setStorage({
						key: 'discharge_outlet',
						data: this.portOptions
					})
				});
			},
			// 检查数据中是否存在超标项并返回具体超标材料种类
			isError(data) {
				const errorTypes = [];
				if (data.moiture > 12) errorTypes.push('水分');
				if (data.deoxynivalenol > 5000) errorTypes.push('呕吐');
				if (data.fusariumToxin > 1500) errorTypes.push('赤霉');
				if (data.aflatoxin > 50) errorTypes.push('黄曲');
				if (data.colorCode > 3.5) errorTypes.push('色号');
				return errorTypes; // 返回超标材料的数组
			},

			// 查询当前月份的所有数据，不分页
			fetchCurrentMonthData() {
				this.loading = true;
				const currentYear = new Date().getFullYear();
				// 设置日期范围为当前月份
				this.queryParams.dateRange = [
					`${currentYear}-${this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth}-01`, // 起始日期
					`${currentYear}-${this.currentMonth + 1 < 10 ? '0' + (this.currentMonth + 1) : this.currentMonth + 1}-01` // 下一月起始日期
				];
				this.getList(); // 获取数据
			},

			// 获取列表数据（不分页，只加载当前月份的数据）
			getList() {
				this.loading = true;
				getList(this.queryParams).then(resp => {
					this.dataList = resp.rows; // 获取数据
					this.groupDataByDay(this.dataList); // 按天分组并标注日历样式
					this.loading = false;
				}).catch(error => {
					console.error('获取数据失败:', error);
					this.loading = false;
				});
			},

			// 处理日历点击，显示所选日期的详细记录
			getDayItem(e) {
				this.weekMode = true;
				this.selectedDate = e.fulldate; // 设置选中的日期
				this.fetchDateDetails(e.fulldate); // 获取选中日期的详情数据
			},
			// 获取选中日期的详细记录
			fetchDateDetails(date) {
				this.loading = true;
				getList({
					...this.queryParams,
					date
				}).then(resp => {
					// 只筛选不合格的记录
					this.dateDetails = resp.rows.filter(item => this.formatDate(item.createTime) === date && this
						.isError(item).length > 0);
					this.loading = false;
				}).catch(error => {
					console.error('获取数据失败:', error);
					this.loading = false;
				});
			},
			// 按天分组数据并标注日历样式
			groupDataByDay(data) {
				const groupedData = data.reduce((acc, item) => {
					const date = this.formatDate(item.createTime);
					if (!acc[date]) {
						acc[date] = [];
					}
					acc[date].push(item);
					return acc;
				}, {});

				this.dateDayStyle = []; // 重置日期样式

				// 为每个不合格材料设置不同的颜色
				const errorMaterialColors = {
					'水分': 'blue', // 水分超标：蓝色
					'呕吐': 'orange', // 呕吐超标：橙色
					'赤霉': 'green', // 赤霉超标：绿色
					'黄曲': 'pink', // 黄曲超标：粉色
					'色号': 'purple' // 色号超标：紫色
				};

				Object.keys(groupedData).forEach(date => {
					const items = groupedData[date];
					const errorRecords = items.filter(item => this.isError(item).length > 0); // 只获取不合格的记录

					// 确定当天的颜色和信息
					let color = 'gray'; // 默认颜色为灰色（无不合格记录）
					let infoText = `数据条目数: ${items.length}`; // 正常数据

					if (errorRecords.length === 1) {
						// 只有一条不合格记录
						const errorTypes = this.isError(errorRecords[0]); // 获取当前记录的超标材料名称
						if (errorTypes.length === 1) {
							// 只有一个超标材料
							infoText = `${errorTypes[0]}`; // 显示超标材料名称
							color = errorMaterialColors[errorTypes[0]] || 'orange'; // 设置对应的颜色
						} else {
							// 有多个超标材料
							infoText = `${errorTypes.length}项超标`; // 显示超标数量
							color = 'red'; // 默认红色
						}
					} else if (errorRecords.length > 1) {
						// 多条不合格记录
						color = 'red'; // 设置为红色背景
						infoText = `${errorRecords.length}条记录`; // 显示不合格记录的数量
					}

					// 添加或更新dateDayStyle
					this.dateDayStyle.push({
						date: date,
						info: infoText,
						color: color
					});
				});
			},

			// 格式化日期为'YYYY-MM-DD'
			formatDate(dateStr) {
				dateStr = dateStr && dateStr.replace(/-/g, '/');
				const date = new Date(dateStr);
				return date.toISOString().split('T')[0];
			},
			// 切换视图类型
			handleViewChange(view) {
				this.viewType = view; // 切换为 "week" 或 "month"
			},
		}
	};
</script>

<style lang="scss">
	.wrap {
		padding: 5px;
		padding-bottom: 50px;
		/* 增加底部空间，避免遮挡按钮 */
	}

	.head {
		margin-bottom: 16px;
	}

	.date-details {
		margin-top: 16px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 16px;
		background-color: #f9f9f9;
	}

	.date-details-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.date-details-item {
		padding: 12px;
		border-bottom: 1px solid #e0e0e0;

		&:last-child {
			border-bottom: none;
		}
	}

	.detail-item {
		font-size: 14px;
		width: 100vw;
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号显示溢出文本（如果适用） */
		white-space: nowrap;
		/* 禁止文本换行 */
	}

	.detail-item-title {
		font-size: 16px;
		font-weight: bold;
	}

	.detail-item-text {
		font-size: 12px;
		font-weight: bold;
		color: #ff4d4f; // 红色文本，用于显示超标项
	}

	.detail-item-info {
		font-size: 12px;
		color: #555; // 默认信息颜色
	}

	.error-text {
		color: #ff4d4f;
	}

	/* 日期超标样式 */
	.date-style {
		&.blue {
			background-color: #cce7ff; // 蓝色背景，表示正常
		}

		&.orange {
			background-color: #ffe0b3; // 橙色背景，表示单项超标
		}

		&.red {
			background-color: #ffcccc; // 红色背景，表示多项超标
		}
	}

	/* 新增的按钮样式 */
	.button {
		padding: 10px 20px;
		background-color: #4caf50;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;

		&:hover {
			background-color: #45a049;
		}
	}

	/* 标题和文本的间距和对齐 */
	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.text {
		font-size: 14px;
		line-height: 1.6;
		color: #333;
	}

	/* 卡片样式 */
	.uni-card {
		margin-bottom: 16px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		padding: 16px;
		background-color: #fff;

		&__header {
			font-size: 16px;
			font-weight: bold;
		}

		&__content {
			font-size: 14px;
			color: #555;
		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		/* 离底部20px，避免遮挡 */
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}

	.footer u-button {
		width: 80%;
	}
</style>